<template>
    <div id="login">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="手机号" prop="telNumber">
                <el-input v-model="ruleForm.telNumber" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="活动名称" prop="code">
                <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item label="勾选阅读协议" prop="agreeFlag">
                <el-checkbox v-model="ruleForm.agreeFlag">已经阅读协议</el-checkbox>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            </el-form-item>
        </el-form>
       
        
        

    </div>
</template>
<script>
import {api_authorizations} from '@/api/user'
import {getUserToken,setUserInfo} from '@/store/index.js'
export default {
    data(){
        var validateAgreeFlag = (rule, value, callback) => {
            if (value === false) {
                callback(new Error('请勾选阅读协议'));
            } else {
                callback();
            }
        };
        return{
            ruleForm:{
                telNumber:"13911111111",
                code:"246810",
                agreeFlag:true
            },
            rules: {
                telNumber: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '清输入验证码', trigger: 'blur' },
                    { min: 6, max: 6, message: '验证码必须为6位数字', trigger: 'blur' }
                ],
                agreeFlag: [
                    { validator: validateAgreeFlag, trigger: 'change' }
                ],
             }
        }
    },
    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleClickLogin();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleClickLogin(){
            if(this.telNumber === ""){
                this.$message.error("请输入手机号")
                return;
            }

            if(this.code === ""){
                this.$message.error("请输入验证码")
                return;
            }

            if(this.agreeFlag === false){
                this.$message.error("请勾选阅读协议")
                return;
            }
            let data={
                mobile:this.ruleForm.telNumber,
                code:this.ruleForm.code
            }
            api_authorizations(data).then((res)=>{
                if(res){
                    
                    console.log(res.data)
                    setUserInfo(res.data.data)
                    let userInfo =getUserToken()
                    if(userInfo && userInfo.token){
                        this.$message.success(res.data.message)
                        this.$router.push({
                            path:'/'
                        })
                    }else{
                        this.$message.success('登陆失败')
                    }
                    
                    
                }
                
            })
            
        }
    }

}
</script>
